@use "@/common/styles/colors"

.settings-page
  display: grid
  grid-template-columns: 18rem 1fr
  height: 100%
  overflow: hidden
  user-select: none

  .settings-content
    display: flex
    flex-direction: column
    height: 100%
    overflow: hidden

    .settings-header
      flex-shrink: 0
      padding: 1rem 2rem 0.5rem
      display: flex
      align-items: center
      gap: 1rem

      svg
        width: 2.5rem
        height: 2.5rem

      h1
        margin: 0
        font-size: 24pt

    hr
      flex-shrink: 0
      background-color: colors.$gray
      width: calc(100% - 4rem)
      margin: 0 2rem
      height: 3px
      border: none
      border-radius: 5px

    .settings-content-inner
      flex: 1
      overflow-y: auto
      overflow-x: hidden
      padding: 1rem 2rem 2rem
      
      > *
        width: 80%
        max-width: 80%